<template>
  <view class="main">
    <uni-forms class="edit-form" :model="params" ref="form">
      <uni-forms-item label="姓名">
        <uni-easyinput
          :inputBorder="false"
          v-model="params.name"
          placeholder="请输入姓名"
        ></uni-easyinput>
      </uni-forms-item>
      <uni-forms-item label="手机">
        <uni-easyinput
          :inputBorder="false"
          v-model="params.phoneNumber"
          placeholder="请输入手机号"
        ></uni-easyinput>
      </uni-forms-item>
      <uni-forms-item label="地址">
        <uni-easyinput
          :inputBorder="false"
          v-model="params.address"
          placeholder="请输入详细地址"
        ></uni-easyinput>
      </uni-forms-item>
      <uni-forms-item label="邮编">
        <uni-easyinput
          :inputBorder="false"
          v-model="params.postcode"
          placeholder="请输入邮编"
        ></uni-easyinput>
      </uni-forms-item>
    </uni-forms>
    <button class="submit" @click="submit">提交</button>
  </view>
</template>

<script lang="ts">
import { getAddress, saveAddress } from "@/api/address";
import { Address } from "@/typings";
import Vue from "vue";
export default Vue.extend({
  data() {
    return {
      params: {
        id: "0",
        name: "",
        phoneNumber: "",
        address: "",
        postcode: "",
      } as Address,
    };
  },
  onLoad(ops: any) {
    let id = ops.id as string;
    getAddress(id).then((res) => {
      this.params = res;
    });
  },
  methods: {
    submit() {
      saveAddress(this.params).then((res) => {
        if (res == true) {
          uni.showToast({
            title: "修改成功",
          });
          setTimeout(() => {
            uni.navigateBack({});
          }, 1000);
        }
      });
    },
  },
});
</script>

<style lang="scss" scoped>
.main {
  border-radius: 15rpx;
  margin: 0 20rpx;
  padding: 20rpx;
  .submit {
    width: 300rpx;
    height: 80rpx;
    line-height: 80rpx;
    border-radius: 40rpx;
    margin-top: 50rpx;
    margin-bottom: 30rpx;
    border: 0;
    color: white;
    box-shadow: 10rpx 10rpx 15rpx rgb(245, 245, 245);
    background-color: rgb(0, 170, 255);
  }
}
</style>
